<template>
  <div id="subareaSamplingChartsRef" ref="subareaSamplingChartsRef" class="echats-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'

// 数据
const listData = ref([
  {
    "lable": "子区一",
    "value": 41
  },
  {
    "lable": "子区二",
    "value": 33
  },
  {
    "lable": "子区三",
    "value": 43
  },
  {
    "lable": "子区四",
    "value": 58
  },
  {
    "lable": "子区五",
    "value": 83
  },
]);

// 图表
let myChart = null;
const xAxisArr = ref([]);
const seriesArr = ref([]);
// 渲染图表
const renderChart = () => {
  if (!myChart) {
    myChart = echarts.init(document.getElementById('subareaSamplingChartsRef'));
  }
  // 数据
  xAxisArr.value = listData.value.map(item => { return item.lable });
  seriesArr.value = listData.value.map(item => { return item.value });
  // 配置项
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      },
      show: false
    },
    grid: {
      top: '8%',
      left: 0,
      right: 0,
      containLabel: true,
    },
    // x轴
    xAxis: {
      type: 'category',
      data: xAxisArr.value,
      // x轴样式
      axisLine: {
        lineStyle: {
          color: '#30374A',
          show: false,
        }
      },
      //x轴文字的配置
      axisLabel: {
        textStyle: {
          color: 'rgba(255, 255, 255, 0.5)',
        },
      },
    },
    // y轴
    yAxis: {
      type: 'value',
      min: 0,
      // max: 100,
      // y轴样式
      axisLine: {
        show: false,
        lineStyle: {
          color: 'transparent'
        }
      },
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: 'rgba(255,255,255,0.5)',
        },
      },
      // 背景线条
      splitLine: {
        lineStyle: {
          color: 'rgba(71,90,219,0.5)', type: 'dashed'
        }
      }
    },
    series: [
      {
        type: "bar",
        data: seriesArr.value,
        barWidth: 10,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#46FFFF' },
            { offset: 1, color: '#0775FE' }
          ]),
        },
        showBackground: true,
        backgroundStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(71, 90, 219, 0.2)' },
            { offset: 1, color: 'rgba(71, 90, 219, 0)' }
          ]),
        },
        label: {
          show: true,
          color: '#46FFFF',
          position: 'top',
        },
      },
      {
        type: "line",
        data: seriesArr.value,
        symbol: 'circle', //折线点设置为实心点
        symbolSize: 12, //折线点的大小
        itemStyle: {
          color: '#46FFFF',
          borderColor: '#0775FE',
          borderWidth: 3,
          boxShadow: '0px 0px 6px 1px rgba(70,255,255,0.8)',
        },
        lineStyle: {
          color: '#0775FE', //改变折线颜色
          width: 2,//改变粗细  
        }
      },
    ],
    // 刻度线
    axisTick: {
      show: false,
      length: 0,
      lineStyle: {
        color: 'transparent',
        type: 'solid',
        width: 1
      },
      alignWithLabel: false
    },
  };

  // 渲染
  option && myChart.setOption(option);
}

// 挂载
onMounted(() => {
  // 渲染图表
  renderChart();
  // 自适应大小
  window.onresize = function () {
    myChart.resize();
  };
})
</script>
<style lang='scss' scoped>
.echats-box {
  width: 420px;
  height: 245px;
  margin: 20px auto 0;
  font-size: 14px;
}
</style>